<!-- 优惠劵列表  -->
<template>
	<view class="page_box">
		<view class="head_box">
			<view class="coupon-nav x-f">
				<view class="nav-item y-f" v-for="nav in couponsState" :key="nav.id" @tap="onNav(nav.id)">
					<view class="item-title">{{ nav.title }}</view>
					<text class="nav-line" :class="{ 'line-active': stateCurrent === nav.id }"></text>
				</view>
			</view>
		</view>
		<view class="content_box">
			<view v-if="showEmpty" style="color: #cccccc;" class="w100 df-c fs26">
				<view class="df-c">
					<u-line length="50" color="#cccccc"></u-line>
					<view class="ma10">暂无相关信息</view>
					<u-line color="#cccccc" length="50"></u-line>
				</view>
			</view>
			<view class="coupon-list" v-for="(c, index) in couponList" :key="index" @tap="toCouponDetail(c)">
				<shopro-coupon :state="stateCurrent" :couponData="c"></shopro-coupon>
			</view>
		</view>
		<view class="foot_box"></view>
		<!-- 关注弹窗 -->
		<shopro-float-btn></shopro-float-btn>
		<!-- 连续弹窗提醒 -->
		<shopro-notice-modal></shopro-notice-modal>
		<!-- 登录提示 -->
		<shopro-login-modal></shopro-login-modal>
	</view>
</template>

<script>
	export default {
		components: {},
		data() {
			return {
				stateCurrent: 1,
				couponsState: [{
						id: 1,
						title: '可使用'
					},
					{
						id: 2,
						title: '已使用'
					},
					{
						id: 3,
						title: '已失效'
					}
				],
				couponList: [],
				showEmpty:false
			};
		},
		computed: {},
		onLoad() {
			this.getCouponList();
		},
		methods: {
			onNav(id) {
				this.stateCurrent = id;
				this.couponList = [];
				this.getCouponList();
			},
			jump(path, parmas) {
				this.$Router.push({
					path: path,
					query: parmas
				});
			},
			getCouponList() {
				let that = this;
				that.$api('coupons.list', {
					type: that.stateCurrent
				}).then(res => {
					if (res.code === 1) {
						that.couponList = res.data;
						if(res.data.length==0){
							that.showEmpty=true
						}
					}
				});
			},

			//跳转优惠券详情
			toCouponDetail(data) {
				if (data.id!=1) {
					this.jump('/pages/goods/coupon/detail', {
						id: data.id,
						userCouponId: data.user_coupons_id
					});
				} else if(data.id==1){
					this.jump('/pages/goods/coupon/coupon', {
						id: data.id,
						userCouponId: data.user_coupons_id
					});
				}
			}
		}
	};
</script>

<style lang="scss" scoped>
	.page_box {
		background: #fff;
	}

	.coupon-nav {
		background: #fff;
		height: 100rpx;

		.nav-item {
			flex: 1;

			.item-title {
				font-size: 30rpx;
				font-family: PingFang SC;
				font-weight: 400;
				color: rgba(51, 51, 51, 1);
				line-height: 76rpx;
			}

			.nav-line {
				width: 120rpx;
				height: 4rpx;
				background: #fff;
			}

			.line-active {
				background: linear-gradient(270deg, #53181E, #7D333B);
			}
		}
	}

	.coupon-list {
		margin: 30rpx 20rpx;
	}
</style>
